<template>
  <div class="user-cotainer mb60">
    <van-nav-bar left-arrow @click-left="$router.back()" fixed title="校园超市"></van-nav-bar>
    <div class="user-cover">
      <h3 class="nickname">{{ userInfo.nickname }}</h3>
      <img class="avatar" :src="$baseUrl + userInfo.avatarurl" :alt="userInfo.nickname">
      <div class="order">
        <h5>我的订单</h5>
        <div class="order-status">
          <div>待付款</div>
          <div>待发货</div>
          <div>待收货</div>
          <div>待评价</div>
        </div>
      </div>
    </div>

    <van-cell-group>
      <van-cell is-link to="/addressList" title="我的地址" value="地址管理" />
      <van-cell title="我的评价" value="评价管理" />
      <van-cell title="联系客服" value="在线投诉" />
      <van-cell>
        <van-button color="#FF2F13" round block @click="logout">安全退出</van-button>
      </van-cell>
    </van-cell-group>

  </div>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
  data() {
    return {
      userInfo: {}
    }
  },
  methods: {
    ...mapMutations('cart', ['cartListInit']),
    // 退出登录
    logout() {
      localStorage.removeItem('userLoginInfo');
      localStorage.removeItem('store');
      this.$toast('退出成功');
      // 清空购物车列表
      this.cartListInit([]);
      this.$router.push({ name: 'index' });
    },
    // 检测token有效期
    checkToken() {
      this.$axios.get('/checktoken').then(() => { })
    }
  },
  created() {
    // 从本地存储中获取用户信息
    this.userInfo = JSON.parse(localStorage.getItem('userLoginInfo') || '{}');
    this.checkToken();
  }
}
</script>

<style>
.user-cotainer {
  background-color: #f1f1f1;
  height: 100vh;
  margin-top: 50px;
}

.user-cover {
  box-sizing: border-box;
  position: relative;
  height: 180px;
  width: 100%;
  background: #FF2F13;
  color: #FFF;
  padding: 10px;
  margin-bottom: 80px;
}

.nickname {
  margin-left: 30px;
}

.user-cover .order {
  box-sizing: border-box;
  position: absolute;
  bottom: -60px;
  left: 50%;
  background: #FFF;
  width: 88%;
  height: 120px;
  border-radius: 10px;
  transform: translateX(-50%);
  color: #333;
  padding: 10px;
}

.order-status {
  display: flex;
  justify-content: center;
}

.order-status div {
  flex: 1;
  text-align: center;
}

.avatar {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 10px;
  right: 20px;
  border-radius: 50%;
}
</style>